﻿@*
    For more information on enabling MVC for empty projects, visit https://go.microsoft.com/fwlink/?LinkID=397860
*@
@{
}


<link href="~/lib/layui/css/layui.css" rel="stylesheet" />
<script src="~/lib/layui/layui.js"></script>
<script src="~/lib/jquery/dist/jquery.js"></script>


<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>用户管理</title>
    <!-- 请勿在项目正式环境中引用该 layui.css 地址 -->
    <link href="//unpkg.com/layui@2.9.18/dist/css/layui.css" rel="stylesheet">
</head>
<body>
    <style>
        .demo-login-container {
            display: flex;
            flex-wrap: wrap; /* 允许换行 */
        }

        .layui-form-item.layui-inline {
            width: 48%; /* 设置每个表单项的宽度 */
            margin-right: 4%; /* 添加间距 */
            box-sizing: border-box; /* 确保内边距和边框包含在宽度内 */
        }

            .layui-form-item.layui-inline:nth-child(2n) {
                margin-right: 0; /* 去除每行第二个元素的右边距 */
            }

        .layui-form-label {
            width: 90px; /* 根据需要调整标签宽度 */
        }

        .layui-input-block, .layui-input-inline {
            margin-left: 70px; /* 确保输入框与标签对齐 */
        }

        .layui-form-select {
            width: 189px;
        }
    </style>

    <form class="layui-form" id="usersAdd">
        <div>
            <div class="layui-form-item">
                <label class="layui-form-label">账号</label>
                <div class="layui-input-block">
                    <input type="text" id="userAccount" required lay-verify="required" placeholder="请输入账号" autocomplete="off" class="layui-input">
                </div>
            </div>
            <div class="layui-form-item">
                <label class="layui-form-label">姓名</label>
                <div class="layui-input-block">
                    <input type="text" id="usersName" required lay-verify="required" placeholder="请输入姓名" autocomplete="off" class="layui-input">
                </div>
            </div>
            <div class="layui-form-item">
                <label class="layui-form-label">性别</label>
                <div class="layui-input-block">
                    <input type="radio" name="gender" value="0" title="男">
                    <input type="radio" name="gender" value="1" title="女">
                </div>
            </div>
            <div class="layui-form-item">
                <label class="layui-form-label">头像</label>
                <div class="layui-input-block">
                    <input type="file" id="usersImage" required lay-verify="required" class="layui-input">
                </div>
            </div>
            <div class="layui-form-item">
                <label class="layui-form-label">角色</label>
                <div class="layui-input-inline">
                    <select id="roleId" lay-filter="testSelect" required  >
                       
                    </select>
                </div>
            </div>
            <div class="layui-form-item">
                <div class="layui-input-block">
                    <button class="layui-btn" lay-submit lay-filter="formDemo" onclick="userAdd()">添加</button>
                    <button type="reset" class="layui-btn layui-btn-primary">重置</button>
                </div>
            </div>
        </div>
    </form>




</body>
</html>

<script src="//unpkg.com/layui@2.9.18/dist/layui.js"></script>
<script src="//unpkg.com/jquery/dist/jquery.js"></script>

<script>
    $(function () {
        getcheckPers();//角色下拉框
    });

    function getcheckPers() {
        $.get({
            url: "http://localhost:5018/api/Users/PermissionRoleSearch",
            data: JSON.stringify({}),
            async: false,
            dataType: "json",
            contentType: "application/json",
            success: res => {
                console.log(res);
                //var content = "";
                $("#roleId").append(`<option value="0">请选择</option>`);
                $.each(res.data, function () {
                    $("#roleId").append(`<option value="${this.roleId}">${this.roleName}</option>`);
                    //content += `<option value="${this.roleId}">${this.roleName}</option>`;
                })
                //$("#roleId").html(content);
                    layui.form.render('select'); // 重新渲染下拉框
            }
        })
    }

    function userAdd() {
        var data = {
            userAccount: $("#userAccount").val(),
            usersName: $("#usersName").val(),
            gender: $("[name=gender]:checked").val(),
            usersImage: $("#usersImage").val(),
            roleId: $("#roleId").val()
        }
        console.log(data);
        $.post({
            url: '@ViewBag.Darius'+"/api/Users/Handle/UsersRoleAdd",
            data: JSON.stringify(data),
            async: false,
            dataType: "json",
            contentType: "application/json",
            success: res => {
                console.log(res);
                if (res.code == 1) {
                   alert("添加成功");
                    layer.closeAll(); // 关闭弹框
                } else {
                    alert("添加失败");
                }
            }
        })
    }
    
    //角色下拉框改变事件
    layui.form.on('select(testSelect)', function (data) {
        console.log(data.value); //得到当前选择的值
    });
   


</script>




